<div>
    <div class="tab-head">
        <div>
            <label>{{'recharge.sn'|translate}}</label>
            <input nz-input style="width: 180px;" [(ngModel)]="page.sn" placeholder="{{'recharge.sn'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div>
            <label>{{'recharge.loginId'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.loginId" placeholder="{{'recharge.loginId'|translate}}{{'placeholder.search'|translate}}" />

        </div>
        <div>
            <label>{{'recharge.createTime'|translate}}</label>
            <nz-range-picker nzFormat='yyyy-MM-dd' style="width: 240px;" [(ngModel)]="dateRange" (ngModelChange)="onChangeDate($event)">
            </nz-range-picker>
        </div>
        <div>
            <button nz-button class="noradius" nzType="primary" (click)="loadList()">{{'placeholder.search'|translate}}</button>
        </div>
    </div>
    <div class="tab-title">
        {{'recharge.listTitle'|translate}}
        <a routerLink="/basicSetting/rechargeAdd">{{'recharge.add'|translate}}</a>
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="pages"  [nzPageIndex]="page.pageNo"
         nzPageSize="10"  (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false"
        [nzLoading]="tableLoading" [nzData]="dataList" [nzScroll]="{ x: '1470px' }">
        <thead>
            <tr>
                <th nzWidth="210px">{{'recharge.sn'|translate}}</th>
                <th nzWidth="180px">{{'recharge.createTime'|translate}}</th>
                <th nzWidth="110px">{{'recharge.loginId'|translate}}</th>
                <th nzWidth="160px">{{'recharge.amount'|translate}}</th>
                <th nzWidth="160px">{{'recharge.bonusAmount'|translate}}</th>
                <th nzWidth="120px">{{'recharge.balance'|translate}}</th>
                <th nzWidth="160px">{{'recharge.bonusTotalBalance'|translate}}</th>
                <th nzRight="250px" nzWidth="120px">{{'recharge.status'|translate}}</th>
                <th nzRight="0" nzWidth='250px'>{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td nzWidth="210px">{{ data.sn }}</td>
                <td nzWidth="180px">{{ data.createTime }}</td>
                <td nzWidth="110px">{{ data.loginId }}</td>
                <td nzWidth="160px">{{ data.amount}}</td>
                <td nzWidth="160px">{{ data.bonusAmount}}</td>
                <td nzWidth="120px">{{ data.balance}}</td>
                <td nzWidth="160px">{{ data.bonusTotalBalance}}</td>
                <td nzRight="250px" nzWidth="120px">
						<nz-tag *ngIf="data.status === 'CREATED'" [nzColor]="'#2db7f5'">{{'rechargeStatus.CREATED'|translate}}</nz-tag>
						<nz-tag *ngIf="data.status === 'CANCELLED'" [nzColor]="'#f50'">{{'rechargeStatus.CANCELLED'|translate}}</nz-tag>
						<nz-tag *ngIf="data.status === 'APPROVED'" [nzColor]="'#87d068'">{{'rechargeStatus.APPROVED'|translate}}</nz-tag>
						<nz-tag *ngIf="data.status === 'COMPLETED'" [nzColor]="'#ddd'">{{'rechargeStatus.COMPLETED'|translate}}</nz-tag>
				</td>
                <td nzRight="0" class='my-cz' nzWidth='250px'>
                    <a *ngIf="data.status === 'CREATED'" style="color: red;"
                        (click)='reject(data)'>{{'cz.reject'|translate}}</a>
                    <a *ngIf="data.status === 'APPROVED' && data.isFirstDeposit === 'N'" style="color: red;"
                        (click)='reject(data)'>{{'cz.reject'|translate}}</a>
                    <a *ngIf="data.status === 'CREATED'" style="color: green;"
                        (click)='sure(data)'>{{'cz.approve'|translate}}</a>
                    <a (click)='detail(data)'>{{'cz.detail2'|translate}}</a>
                </td>
            </tr>
        </tbody>
    </nz-table>

    <nz-modal nzWidth='900' [(nzVisible)]="isVisible"(nzOnCancel)="handleCancel()" [nzFooter]="null" [nzMaskClosable]="true" nzTitle="{{'cz.detail2'|translate}}">

        <div class="gutter-example">
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row " nzSpan="8">
                    <span>{{'recharge.sn'|translate}}:</span> {{selectedRowData?.sn}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.createTime'|translate}}:</span> {{selectedRowData?.createTime}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.loginId'|translate}}:</span> {{selectedRowData?.loginId}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.amount'|translate}}(¥):</span> {{selectedRowData?.amount}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.before'|translate}}(¥):</span> {{selectedRowData.status === 'APPROVED'?selectedRowData.balance-selectedRowData.totalAmount:selectedRowData.balance}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.after'|translate}}(¥):</span> {{selectedRowData.status === 'APPROVED'?selectedRowData.balance:selectedRowData.balance+selectedRowData.totalAmount}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.transType'|translate}}:</span> {{'recharge.title'|translate}}
                </div>
            </div>
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.status'|translate}}:</span> {{rechargeStatus[selectedRowData.status]}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.type'|translate}}:</span> {{selectedRowData?.type === 'USDT' ? rechargeStatus['type1'] : rechargeStatus['type2']}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8" *ngIf="selectedRowData?.bankSn">
                    <span>{{'recharge.bankSn'|translate}}:</span> {{selectedRowData?.bankSn}}
                </div>
            </div>
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }" *ngIf="selectedRowData?.images&&selectedRowData?.images.length>0">
                <div nz-col class="gutter-row" nzSpan="24">
                    <div style="display: flex;">
                        <span>{{'recharge.images'|translate}}:</span>
                        <div>
                            <a *ngFor="let item of selectedRowData?.images" [href]="item" target="_blank"><img [src]="item" style="width: 180px;height:120px;border:1px solid #f1f1f1;border-radius:4px;margin:0 10px;" /></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }" *ngFor="let item of selectedRowData?.logList">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.czTime'|translate}}:</span> {{item?.createTime}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'recharge.czName'|translate}}:</span> {{item?.name}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
					<span>{{'recharge.czType'|translate}}:</span> {{item?.status === 'CREATED' ? rechargeStatus['CREATED2']:item?.status === 'APPROVED'?rechargeStatus['APPROVED']:rechargeStatus['CANCELLED2']}}
                </div>
            </div>
        </div>
    </nz-modal>

    <!-- <nz-modal [(nzVisible)]="isQX" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <h3>确定驳回？</h3>
            <nz-form-item>
                <nz-form-control [nzValidateStatus]="validateForm.get('rejectMemo')">
                    <textarea nz-input id="rejectMemo" formControlName="rejectMemo"
                        placeholder="这里输入驳回理由..."></textarea>
                </nz-form-control>
            </nz-form-item>
        </form>
	</nz-modal> -->
	
	<!-- <nz-modal (nzOnCancel)="cancel()" [(nzVisible)]="isVisible2" [nzMaskClosable]="true" [nzFooter]="modalFooter2" nzTitle="充值审核">


        <ng-template #modalFooter2>
            <button nz-button nzType="primary" (click)="onChangeStatus(del,'RECEIVED')">充值审核通过</button>
            <button nz-button nzType="default" (click)="cancel()">关闭</button>
        </ng-template>
    </nz-modal> -->
</div>

